import { FC, useEffect, useState, memo } from 'react';
import Image from '@/components/Image';
import Line from '@/components/Line';
import ScrollModel from '@/components/ScrollModel';
import InlineTitle from './../components/InlineTitle';

import styles from './style.less';

import titleLeft from '@/assets/qyhx/sentiment/title_icon_left.png';
import titleRight from '@/assets/qyhx/sentiment/title_icon_right.png';

import { useModel } from 'umi';

interface Iprops {
  title: string;
}
const Chart: FC<Iprops> = (props) => {
  const { title } = props;
  const { warningMonthData } = useModel('company');
  return (
    <div className={styles.chart_container}>
      <div className={styles.line_warp}>
        <InlineTitle title={title} />
        <div className={styles.line_chart}>
          <Line
            width={840}
            height={290}
            category={warningMonthData?.chartData?.names || []}
            dataSource={warningMonthData?.chartData?.values || []}
            legend={{
              top: 'bottom',
              icon: 'circle',
              textStyle: {
                fontSize: 20,
                color: 'inherit',
              },
            }}
            colors={['#1890FF', '#FFEC3D']}
          ></Line>
        </div>
      </div>
      <div className={styles.warning_warp}>
        <InlineTitle title="预警分析" />
        <div className={styles.warning_content}>
          <ScrollModel width={790} height={230}>
            <div className={styles.info_text}>
              {warningMonthData?.warningInfo?.data &&
                warningMonthData.warningInfo.data.map((item: any) => (
                  <p>{item.YJXX || ''}</p>
                ))}
            </div>
          </ScrollModel>
        </div>
      </div>
    </div>
  );
};
export default memo(Chart);
